<template>
  <div class="selfVerification">
    <el-form
      :inline="true"
      label-width="80px"
      ref="projectInfo"
      :model="projectInfo"
      label-position="right"
      v-if="projectInfo"
    >
      <div class="maintitle">项目完工及施工自验信息</div>

      <div class="projected">
        <span>项目名称：</span>
        <span style="color:#737373;">{{projectInfo.projectName}}</span>
        <span style="margin-left:40px">红线面积：</span>
        <span style="color:#737373;">{{projectInfo.redLineArea}}公顷</span>
      </div>
      <el-form-item label="实施规模" style=" ">
        <el-input
          type="number"
          min="0"
          :disabled="disabled"
          style="width:200px;"
          v-model="projectInfo.implementationScale"
        >
          <i slot="suffix">公顷</i>
        </el-input>
      </el-form-item>
      <el-form-item label="新增耕地">
        <el-input
          type="number"
          min="0"
          :disabled="disabled"
          style="width:200px;"
          v-model="projectInfo.newLand"
        >
          <i slot="suffix">公顷</i>
        </el-input>
      </el-form-item>
      <el-form-item label="投资规模">
        <el-input
          type="number"
          min="0"
          :disabled="disabled"
          style="width:200px;"
          v-model="projectInfo.investmentScale"
        >
          <i slot="suffix">万元</i>
        </el-input>
      </el-form-item>
      <el-form-item label="竣工日期">
        <el-date-picker
          :disabled="disabled"
          v-model="projectInfo.completionTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <div>
        <div class="titleDeputy">自验结论</div>
        <el-form-item>
          <el-input
            :disabled="disabled"
            class="txtArea"
            type="textarea"
            rows="6"
            style="width:626%;"
            v-model="projectInfo.selfInspectionConclusion"
          ></el-input>
        </el-form-item>
      </div>
      <div class="maintitle">附件信息</div>
      <el-form-item label="施工自验报告" label-width="120px">
        <el-upload
          v-if="!disabled"
          class="upload-demo"
          :action="$https+'/pc/file/upload'"
          :limit="1"
          :on-success="uploadSuccess"
          :file-list="fileList[0]"
          :disabled="disabled"
          accept=".pdf"
        >
          <el-button v-if="!disabled" size="small">上传</el-button>
          <!-- <el-button @click="seePdf(0)" v-if="disabled" size="small">查看</el-button> -->
        </el-upload>
        <seeFujianForList v-if="disabled && fileList[0]" @openPdf="seePdf" :file-obj="fileList[0]" :file-num="0" />
      </el-form-item>
      <div style="margin-top:20px;">
        <el-form-item>
          <el-button v-if="!disabled" type="primary" @click="saveInfo">提交</el-button>
          <el-button v-if="!disabled" @click="getInfo">取消</el-button>
          <el-button v-if="disabled" @click="back">返回</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-dialog :close-on-click-modal="false" :title="pdfName" :visible.sync="pdfFlag" width="50%">
      <div class="pdfBox">
        <iframe :src="$https + pdfUrl" style="width:100%;height:600px;" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProjectImplementation,
  saveConstructionSelfInspection
} from "@/api/project1/projectImplementation/selfVerification/index";
import config from "@/config/index.js";
import seeFujianForList from "@/components/seeFujianForList";

export default {
  components: {
    seeFujianForList
  },
  data() {
    return {
      uploadUrl: config.uploadUrl,
      projectInfo: {
        id: "",
        implementationScale: "",
        newLand: "",
        investmentScale: "",
        completionTime: "",
        selfInspectionConclusion: "",
        projectName: "",
        redLineArea: "",
        reportFileId: "",
        reportFileInfo: null,
        projectId: localStorage.getItem("projectId")
      },
      fileList: [],
      disabled: true,
      projectId: localStorage.getItem("projectId") || "",
      pdfUrl: "",
      pdfFlag: false,
      pdfName: ""
    };
  },

  created() {
    if (this.$route.name === localStorage.getItem("key")) {
      this.disabled = false;
    }
    if (localStorage.getItem("lookStatus") == 2) {
      this.disabled = true;
    }
    this.getInfo();
  },

  methods: {
    //查看当前PDF
    seePdf(num) {
      this.pdfFlag = true;
      this.pdfUrl = this.fileList[num][0].url;
      this.pdfName = this.fileList[num][0].name;
    },
    // 获取项目完工及施工自验信息
    getInfo() {
      getProjectImplementation({ projectId: this.projectId }).then(res => {
        if (res.code == 1000 && res.data) {
          if (res.data.implementationScale) {
            this.projectInfo.implementationScale = res.data.implementationScale;
          }
          if (res.data.completionTime) {
            this.projectInfo.completionTime = res.data.completionTime.slice(
              0,
              10
            );
          }
          if (res.data.id) {
            this.projectInfo.id = res.data.id;
          }
          if (res.data.newLand) {
            this.projectInfo.newLand = res.data.newLand;
          }
          if (res.data.investmentScale) {
            this.projectInfo.investmentScale = res.data.investmentScale;
          }
          if (res.data.selfInspectionConclusion) {
            this.projectInfo.selfInspectionConclusion =
              res.data.selfInspectionConclusion;
          }
          if (res.data.projectName) {
            this.projectInfo.projectName = res.data.projectName;
          }
          if (res.data.redLineArea) {
            this.projectInfo.redLineArea = res.data.redLineArea;
          }
          if (res.data.reportFileId) {
            this.projectInfo.reportFileId = res.data.reportFileId;
          }
          if (res.data.reportFileInfo) {
            this.projectInfo.reportFileInfo = res.data.reportFileInfo;

            let reportFileInfo = this.projectInfo.reportFileInfo;
            this.projectInfo["reportFileId"] = reportFileInfo.id;
            this.fileList = [
              [{ name: reportFileInfo.fileName, url: reportFileInfo.filePath }]
            ];
          }
        }
      });
    },
    // 文件上传成功
    uploadSuccess(res, file, fileList) {
      this.projectInfo["reportFileId"] = res.data.id;
    },

    // 保存数据
    saveInfo() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let param = {
        id: this.projectInfo.id,
        projectId: this.projectInfo.projectId,
        implementationScale: this.projectInfo.implementationScale,
        newLand: this.projectInfo.newLand,
        investmentScale: this.projectInfo.investmentScale,
        completionTime: this.projectInfo.completionTime + " " + "00:00:00",
        selfInspectionConclusion: this.projectInfo.selfInspectionConclusion,
        redLineArea: this.projectInfo.redLineArea,
        reportFileId: this.projectInfo.reportFileId
      };

      saveConstructionSelfInspection(param)
        .then(res => {
          loading.close();
          this.$message({
            message: "提交成功",
            type: "success"
          });
          this.$router.push(
            "/projectManagement/projectImplementation/dealwith"
          );
        })
        .catch(err => {
          loading.close();
        });
    },
    back() {
      this.$router.push("/projectManagement/projectImplementation/dealwith");
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-form--inline .el-form-item__label {
  color: #a1a1a1;
}

.selfVerification {
  padding: 20px 20px 0 20px;
  min-height: calc(100vh - 154px);
  background-color: #fff;
}
.btn {
  margin-top: 30px;
}
</style>
<style lang="scss" scoped>
.maintitle {
  padding: 10px 0 30px 0;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 25px;
  color: #4d4d4d;
}
.projected {
  padding: 0 0 30px 0;
  font-size: 15px;
  color: #8c8c8c;
}
.titleDeputy {
  padding: 20px 0 10px 0;
  font-size: 15px;
  color: #8c8c8c;
}
/deep/ .el-form--inline .el-form-item__label {
  color: #8c8c8c;
}
</style>